<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>

	<link rel="stylesheet" href="css/page-styles.css" />
	<link rel="stylesheet" href="css/style.css" />
	<style type="text/css">
	</style>
</head>

<body>
	<div id="DCpile">
		<div id="top">
			<div class="dz-number">
				<div class="num">4</div>
				<span>#</span>
			</div>
			<div class="dz-msg">
				<div class="dz-type">直流桩</div>
				<ul>
					<li>
						380<span>V</span>
					</li>
					<li>
						36<span>kW</span>
					</li>
					<li>
						32<span>A</span>
					</li>
				</ul>
			</div>
			<div class="more-info">
				<ul class="date">
					<li id="date"></li>
					<li id="week"></li>
					<li id="now"></li>
				</ul>
				<div class="weather">

					<ul>
						<li>
							<span id="weather">晴</span>
						</li>
						<li>
							<span id="city_temperature">20</span>
							℃
						</li>
					</ul>
					<div class="border">
						<ul class="Airquality">
							<li>PM2.5</li>
							<li> <em id="pm25">60</em> <em id="pm_level">优</em>
							</li>
						</ul>
					</div>

				</div>

				<div class="logo">
					<img src="img/logo.png" />
				</div>
			</div>
		</div>
		<div id="container">
			<div class="chargeA chargeB">
				<div class="name" id="gun2">A枪口</div>
				<div id="port2">
					<!-- <div class="picA">
						<div class="bigcircle">
							<div id="circle2" class="second circle second anim-flip show"> <strong></strong>
								<img class="pic" src="img/circle1.png" />
								<img class="battery" src="img/batteryM1.png" />

							</div>
							<div id="circlehidden"></div>
						</div>
					</div>
					<div class="chargeingType">正在充电...</div>
					<ul class="currentInfo">
						<li>
							<ul>
								<li>已充电量</li>
								<li>
									<span>20</span>
									度
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>预计剩余时间</li>
								<li>
									<span id="remaining_time">80</span>
									分钟
								</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>电池温度</li>
								<li>
									<span id="battery_temperature">23</span>
									°C
								</li>
							</ul>
						</li>

					</ul> -->
				</div>

			</div>
			<div class="chargeB chargeA">
				<div class="name" id="gun1">B枪口</div>
				<div id="port1">
					<<!-- div class="picB">
						<img id="circle2" src="img/dc-b.png" />
						<img class="userpic" src="img/user.png" />
					</div>

					<div class="chargeingType">
						已被用户
						<span id="u_id">182***6574</span>
						预约
					</div>

					<ul class="currentInfo">
						<li>
							<ul>
								<li>已充电量</li>
								<li>_</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>预计剩余时间</li>
								<li>_</li>
							</ul>
						</li>
						<li>
							<ul>
								<li>电池温度</li>
								<li>_</li>
							</ul>
						</li>

					</ul> -->
				</div>

			</div>
		</div>

	</div>

	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/circle-progress.js"></script>
	<script type="text/javascript">
			$('#circle2').circleProgress({
            value: 80/100,
            startAngle:-1.5,
            size:700,
            emptyFill: 'rgba(0, 0, 0, .3)',
        	}).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(parseInt(80 * progress) + '%');
        });
        $('#circlehidden').circleProgress({
        value: 80/100,
        startAngle:-1.5,
        size:750,
        animationStartValue: 0,
        emptyFill: '#343738',
        fill: { color: 'rgba(255, 255, 255, .0)' }
        }).on('circle-animation-progress', function(event, progress) {
        $(this).find('strong').html(parseInt(80 * progress) + '%');
    });

		</script>
	<script type="text/javascript" src="js/date.js"></script>
	<script type="text/javascript" src="js/chargingPile.js"></script>
</body>

</html>